<template>
	<view>
		<uni-section :title="`${titleText}联系人`" type="line">
			<view class="example">
				<!-- 基础表单校验 -->
				<uni-forms ref="valiForm" label-align="right" :rules="rules" :modelValue="valiFormData">
					<uni-forms-item label="姓名" required name="name">
						<uni-easyinput v-model="valiFormData.name" placeholder="请输入姓名" />
					</uni-forms-item>
					<uni-forms-item label="手机号" required name="tel">
						<uni-easyinput v-model="valiFormData.tel" placeholder="请输入年龄" />
					</uni-forms-item>
					<uni-forms-item label="备注" name="remark">
						<uni-easyinput type="textarea" v-model="valiFormData.remark" placeholder="请输入备注" maxlength="20"/>
					</uni-forms-item>
				</uni-forms>
				<button type="primary" @click="submit('valiForm')">提交</button>
			</view>
		</uni-section>
	</view>
</template>

<script>
import { getRequest, postRequest } from '@/utils/request.js'
	export default {
			data() {
				return {
					titleText: '新增',
					valiFormData: {
						name: '',
						tel: '',
						remark: '',
					},
					// 校验规则
					rules: {
						name: {
							rules: [{
								required: true,
								errorMessage: '姓名不能为空'
							}]
						},
						tel: {
							rules: [{
								required: true,
								errorMessage: '手机号不能为空'
							},{
								format: 'number',
								errorMessage: '只能输入数字'
							},{
								pattern: '^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\\d{8}$',
								errorMessage: '请输入正确的号码'
							}
							]
						}
					},
				}
				
			},
			onLoad(e) {
				console.log(e)
				if(e && e.id){
					this.titleText = '编辑'
					uni.setNavigationBarTitle({
						title: '编辑联系人'
					});
					uni.ti
					this.getUserInfo(e.id)
					return
				}
			},
			methods: {
				getUserInfo(id) {
					getRequest('phones/itemInfo', {id: id}).then(res=>{
						if(res.code == 0) {
							this.valiFormData = res.data
						}
						console.log(res)
						})
					
				},
				setValue(name,value){
					// 设置表单某项对应得值来触发表单校验
					// 接受两个参数，第一个参数为表单域的 name ，第二个参数为表单域的值
					this.$refs.form.setValue(name,value)
				},
				submit(ref) {
					this.$refs[ref].validate().then(res => {
						console.log('success', res);
						this.addTel()
						// uni.showToast({
						// 	title: `校验通过`
						// })
					}).catch(err => {
						console.log('err', err);
					})
				},
				addTel() {
					postRequest('phones/add', this.valiFormData).then(res=>{
						if(res.code == 0) {
							uni.showToast({
								title: `新增成功`
							})
							// setTimeout(()=>{
								let pages = getCurrentPages();
								let page = pages[pages.length - 2]
								console.log(page)
								page.getList()
								uni.navigateBack({
									delta: 1
								})
							// }, 500)
						}else {
							uni.showToast({
								title: res.message,
								icon:"none"
							})
						}
					})
					// uni.request({
					// 	url: `http://192.168.31.99:3000/api/phones/add`,
					// 	method:"post",
					// 	data: this.valiFormData,
					// 	success: (res) => {
					// 		// this.$message.success('新增成功')
					// 		if(res.data.code === 0) {
					// 		// 	this.list = res.data.data
					// 		uni.showToast({
					// 			title: `新增成功`
					// 		})
					// 		setTimeout(()=>{
					// 			let pages = getCurrentPages();
					// 			let page = pages[pages.length - 2]
					// 			console.log(page)
					// 			page.getList()
					// 			uni.navigateBack({
					// 				delta: 1
					// 			})
					// 		}, 500)
					// 		}else {
					// 			uni.showToast({
					// 				title: res.data.message,
					// 				icon:"none"
					// 			})
					// 		}
					// 	},
					// 	complete: (com) => {
					// 		console.log(com)
					// 	}
					// })
				}
			}
	}
</script>

<style lang="scss">
.example {
		padding: 15px;
		background-color: #fff;
	}

	.segmented-control {
		margin-bottom: 15px;
	}

	.button-group {
		margin-top: 15px;
		display: flex;
		justify-content: space-around;
	}

	.form-item {
		display: flex;
		align-items: center;
	}

	.button {
		display: flex;
		align-items: center;
		height: 35px;
		margin-left: 10px;
	}
</style>
